<template>
    <view class="up-add-container">
    	<view class="cuowu-icon-container" @click="closeBtn">
			<view class="cuowu-icon-item iconfont icon-x"></view>
		</view>
    	<view class="add-title-container">{{titleText}}</view>
		<view class="right-add-btn-container">
			<view class="right-add-btn-bgc-container" @click="add">
				 <view class="right-add-btn-bgc iconfont icon-jiajianzujianjiahao"></view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
		props: {
			titleText: {
				type: String,
				default: '编辑',
			},
		},
        data() {
            return {
            }
        },
		methods: {
			/**
			 * x图标点击事件
			 */
			closeBtn() {
				this.$emit("closeBtn");
			},
			/**
			 * 右边点击事件
			 */
			add() {
				this.$emit("add");
			}
		},
		mounted() {
		},
    }
</script>

<style lang="scss">
	// 错误图标，编辑标题 盒子
	.up-add-container {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;

		// 错误图标
		.cuowu-icon-container {
			width: 10%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			color: #8b929d;

			.cuowu-icon-item {
				font-size: 25rpx;
				font-weight: bold;
			}
		}

		.add-title-container {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
			font-weight: bold;
		}

		.right-add-btn-container {
			width: 20%;
			height: 100%;
			right: 0;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 30rpx;
			color: #8b929d;

			.right-add-btn-bgc-container {
				width: 56%;
				height: 75%;
				background-color: $themeLightPurpleColor;
				display: flex;
				border-radius: 50%;
				justify-content: center;
				align-items: center;

				.right-add-btn-bgc {
					color: $themePurpleColor;
				}
			}
		}
	}
</style>
